<template>
  <view>
	<text :class="textClass">
		{{title}}
		<slot></slot>
	</text>
  </view>
</template>

<script>

export default {
  props: {
	textClass: {
	  type: [String],
	  default: () => {
	  	return 'required';
	  }
	},
	value: {
		type: [String,Number],
		default: () => {
			return ''
		}
	},
	checkRule: {
		type: [Array,Object],
		default () {
			return []
		}
	},
	title: {
		type: String,
		default: () => {
			return ''
		}
	},
	group: {
		type: String,
		default: () => {
			return ''
		}
	},
	field: {
		type: String,
		default: () => {
			return ''
		}
	},
	rule: {
		type: String,
		default: () => {
			return ''
		}
	},
	tip: {
		type: String,
		default: () => {
			return ''
		}
	},
		
  },
  mounted() {
  	this.update();
  },
  destroyed() {
  	this.$emit('change',this.group,this.field,false);
  },
    
  data() {
    return {

	}
  },

  watch:{
  	// 监听下标的变化
  	textClass: {
  		handler(newVal) {
			this.update();
  		},
  		immediate: true
  	},
	value: {
		handler(newVal) {
			this.update();
		},
		immediate: true
	},
	
  },
  methods:{
	  update(){
		  if (this.field){
		  	let rule = {
		  		title:this.title,
		  		field:this.field,
		  		rule:this.rule,
		  		tip:this.tip,
				value:this.value,
		  		'class':this.textClass,			
		  	};
			this.$emit('change',this.group,this.field,rule);
		  }
	  },
	  isCheckText(){
		  return true;
	  },
	  getAttribute(field){
		 if (field=='class') field = 'textClass';
		 return this[field]?this[field]:''; 
	  }
  }
}
</script>
